/**
 * 按钮组件导出处理
 * 用于生成按钮组件的HTML和JS代码
 */

export default {
  /**
   * 生成按钮组件的HTML代码
   * @param {Object} component 组件数据
   * @param {Object} options 导出选项
   * @returns {String} HTML代码
   */
  generateHTML(component, options = {}) {
    const { id, style = {}, props = {} } = component;
    
    // 获取组件数据
    const datas = props.datas || {};

    return `SSR渲染组件失败，这是默认的组件html 
    id: ${id} , 
    datas: ${JSON.stringify(datas)} , 
    style: ${JSON.stringify(style)}  `;

    // 提取按钮属性
    const buttonText = datas.buttonText || 'Button';
    const buttonType = datas.type || 'default';
    const disabled = datas.disabled ? 'disabled' : '';
    const icon = datas.icon ? `<i class="el-icon-${datas.icon}"></i>` : '';
    const buttonClass = datas.plain ? `el-button--${buttonType} is-plain` : `el-button--${buttonType}`;
    
    // 处理圆形按钮
    if (datas.circle) {
      return `
<button id="${id}" class="el-button ${buttonClass} is-circle" ${disabled} style="${this.generateStyle(style)}">
  ${icon}
</button>`;
    }
    
    // 处理带图标的按钮
    if (datas.icon) {
      const iconPosition = datas.iconPosition || 'left';
      
      if (iconPosition === 'left') {
        return `
<button id="${id}" class="el-button ${buttonClass}" ${disabled} style="${this.generateStyle(style)}">
  ${icon} <span>${buttonText}</span>
</button>`;
      } else {
        return `
<button id="${id}" class="el-button ${buttonClass}" ${disabled} style="${this.generateStyle(style)}">
  <span>${buttonText}</span> ${icon}
</button>`;
      }
    }
    
    // 普通按钮
    return `
<button id="${id}" class="el-button ${buttonClass}" ${disabled} style="${this.generateStyle(style)}">
  ${buttonText}
</button>`;
  },
  
  /**
   * 生成按钮组件的JS代码
   * @param {Object} component 组件数据
   * @param {Object} options 导出选项
   * @returns {String} JS代码
   */
  generateJS(component, options = {}) {
    const { id, props = {} } = component;
    const datas = props.datas || {};
    
    // 如果没有定义点击处理函数，则返回空字符串
    if (!datas.clickHandler) {
      return '';
    }
    
    // 生成事件处理代码
    return `
// 按钮点击事件 - ${id}
document.getElementById("${id}").addEventListener("click", function(event) {
  ${datas.clickHandler}
});`;
  },
  
  /**
   * 生成样式字符串
   * @param {Object} style 样式对象
   * @returns {String} 样式字符串
   */
  generateStyle(style = {}) {
    // 基础样式
    const baseStyle = {
      display: 'inline-flex',
      alignItems: 'center',
      justifyContent: 'center',
      ...style
    };
    
    // 转换为样式字符串
    return Object.entries(baseStyle)
      .map(([key, value]) => `${key}: ${value};`)
      .join(' ');
  },
  
  /**
   * 导出所需的资源
   */
  resources: [
    { type: 'css', path: './element-ui.css' }, // Element UI样式
    { type: 'css', path: './custom-button.css' } // 自定义按钮样式
  ]
}; 